import React,{Component} from "react";
import './ueditor.config.js'
import './ueditor.all.js'
import './lang/zh-cn/zh-cn.js'
import UE from './ueditor.all.js';
export default class Ueditor extends Component{
    static defaultProps = {//默认状态？
        config: {
            toolbars: [
                [
                'undo', //撤销
                'bold', //加粗
                'italic',//斜体
                'underline', //下划线
                'horizontal', //分隔线
                'fontborder',//字符边框
                'superscript', //上标
                'subscript', //下标
                'forecolor', //字体颜色
                'backcolor',//背景颜色
                'insertorderedlist',//有序列表
                'insertunorderedlist',//无序列表
                'inserttitle', //插入标题
                'cleardoc', //清空文档
                'fontfamily', //字体
                'fontsize', //字号
                'spechars',//特殊字符
                'paragraph', //段落格式
                'simpleupload', //单图上传
                'insertimage', //多图上传
                'music', //音乐
                // 'inserttable', //插入表格
                'emotion', //表情
                'insertvideo', //视频
                'justifyleft', //居左对齐
                'justifyright', //居右对齐
                'justifycenter', //居中对
                'justifyjustify', //两端对齐
                'forecolor', //字体颜色
                'fullscreen', //全屏
                'edittip ', //编辑提示
                'customstyle', //自定义标题
                'template', //模板
                'searchreplace',//查询替换
                'help',//帮助
                ]
            ]
        }
    }
    constructor(props){
        super(props);
        this.state = {
            ue:undefined,
        }
    }
    componentDidMount(){ this.initEditor(); }
    componentWillUnmount() {
        // 组件卸载后，清除放入库的id
        UE.delEditor(this.props.id);
    }
    initEditor() {
        const { id, config } = this.props;
        const ueEditor = UE.getEditor(this.props.id, config);
        const self = this;
    
        ueEditor.ready((ueditor) => {
            if (!ueditor) {
                UE.delEditor(id);
                self.initEditor();
            }
        })
    }
    render(){
        return(<script id={this.props.id} name="content" type="text/plain"></script>);
    }
}